<template>
  <div class="userSet" ref="userSet">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
    </div>
    <div class="content">
      <van-cell title="账号管理" class="cell-item" @click="toUserDetail">
        <template #right-icon>
          <van-icon name="arrow" class="arrow" />
        </template>
      </van-cell>
      <!-- <van-cell center title="标题">
        <template #right-icon>
          <van-switch v-model="checked" size="20" />
        </template>
      </van-cell> -->
      <van-cell title="深色模式" class="cell-item">
        <template #right-icon>
          <van-switch v-model="checked" @click="checkedCtr" size="20px" />
        </template>
      </van-cell>
      <van-sticky :container="userSet" position="bottom" class="stickyBottom">
        <van-button type="primary" @click="logOut"> 退出登录 </van-button>
      </van-sticky>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Dialog } from "vant";
export default {
  name: "userSet",
  setup() {
    const userSet = ref(null);
    let checked = ref(true);
    const router = useRouter();
    const beforeClose = (action) => {
      new Promise((resolve) => {
        if (action === "confirm") {
          localStorage.removeItem(import.meta.env.VITE_APP_TOKEN);
          localStorage.removeItem(import.meta.env.VITE_APP_USERMSG);
          router.push("/user");
          resolve(true);

          Dialog.close();
        } else {
          resolve(false);
          Dialog.close();
        }
      });
    };
    const goBack = () => {
      router.back(-1);
    };
    const logOut = () => {
      Dialog.confirm({
        width: "250px",
        title: "退出确认",
        showCancelButton: true,
        beforeClose,
        message: "退出当前账号将不能收藏和发布评论",
      });
    };
    const checkedCtr = () => {
      console.log("----", checked.value);
      if (!checked.value) {
      }
    };
    const toUserDetail = () => {
      router.push({ path: "userSet/userConfig" });
    };
    return {
      goBack,
      userSet,
      logOut,
      checked,
      checkedCtr,
      toUserDetail,
    };
  },
};
</script>

<style lang="less" scoped>
.userSet {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .header {
    padding: 5px 10px;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    position: fixed;
    top: 0;
    z-index: 11;
    line-height: 30px;
    background: linear-gradient(10deg, #eee, #fff, #eee);
  }

  .content {
    margin-top: 40px;

    .cell-item {
      border-bottom: 1px solid #dbdbdb;
    }

    .stickyBottom {
      text-align: center;
      margin: 50px auto;
    }
  }
}</style>